<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"  %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>MIO美爱我氧气站</title>
       	<link rel="icon" href="${pageContext.request.contextPath }/assets/images/mio.ico" type="image/x-icon">
        <link href="${pageContext.request.contextPath }/assets/css/main.css" rel="stylesheet" type="text/css" />
        <link href="${pageContext.request.contextPath }/assets/css/product.css" rel="stylesheet" type="text/css" />		
   	    <link href="${pageContext.request.contextPath }/assets/css/jquery.fancybox.css" rel="stylesheet" type="text/css" />	  	    
    	<script type="text/javascript" src="${pageContext.request.contextPath }/assets/videoplayer/flowplayer-3.2.8.min.js"></script>
    	
    </head>
    <body>
    	<div id="bg">
	    	<!-- 头部jsp -->
			<jsp:include page="header.jsp" ></jsp:include>
			<div style="clear:both;"></div>
			<div class="product-img">
			</div>
		</div>
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/jquery-1.9.1.js"></script>
   	    <script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/jquery-migrate-1.1.1.min.js"></script>
   	    <script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/jquery.fancybox-1.2.1.pack.js"></script> 
		<div id="bg">
			<div class="leftProduct">
				<div class="leftProduct-title">
				产品介绍
				</div>
					<div class="ulStyle">
	          			<c:forEach var="item" items="${productTypes }" varStatus="status">
							<div class="text" id="pro${item.id }">
		          				<a href="#" onclick="show_pro_class(${item.id },0);return products_class_change(${item.id })">
		          					<span>${item.productTypeName }</span>
		          				</a>
	          				</div>
	          				<ul id="pro_class${item.id }" style="display: <c:if test="${mainTypeId == item.id}">block;</c:if><c:if test="${mainTypeId != item.id}">none;</c:if>">
		          				<c:forEach var="p" items="${item.nodes }" >
		          				<li><a href="${pageContext.request.contextPath }/product.do?productType=${p.id}">${p.productTypeName }</a></li>
	          					</c:forEach>
	          				</ul>
						</c:forEach>
	                <script>
		                function show_pro_class(number,page){
		                	/**$.ajax({
		                		type: "POST",
		                		dataType:'json',
		                		data:{
		                            'number'	: number,
		                            'page'		: page
		                        },
		                		url: _Web_Url + "/index.php/web/show_pro_class/",
		                		success: function(data){
		                			document.getElementById('show_pro_div').innerHTML = data.ProductList;
		                		}
		                	});**/
		                }
						function products_class_change(x){
							if (document.getElementById('pro_class'+x).style.display=='none'){
								 $('#pro_class'+x).show(300);
							}else{
								 $('#pro_class'+x).hide(300);
							}
							return false;
						}
													
						function pro_menu_change(x,key){
							if (key ==1){
								document.getElementById('pro_menu_a_'+x).style.display = "none";
								document.getElementById('pro_menu_b_'+x).style.display = "";
							}else{
								document.getElementById('pro_menu_a_'+x).style.display = "";
								document.getElementById('pro_menu_b_'+x).style.display = "none";
							}
						}
					</script>
				</div>
			</div>
			<div class="rightProduct">
				<div class="rightProduct-title">
					Product
				</div>
				<div class="rightProduct-content">
					<div class="productInfo_top">
						<!-- 产品图展 -->
						<div class="leftProductImg">
							<div id="product_img">
								<div class="product_imgb">
									<a href="${product.mImgUrl}" title="${product.productName }" class="zoom">放大圖</a>
									<img id="big_pic" style="width:230px;height:230px;margin-top:0px;" src="${product.mImgUrl}" alt="${product.productName }">
								</div> 
							</div>
							<div class="in_photo_list">
								<div id="show_i_pro">
									<a href="${product.mImgUrl}" style="" rel="group" onmouseover="zoom_big('${product.mImgUrl}','width:230px;height:230px;margin-top:0px;')" id="pro_i_img1" class="pro_i_img" title="${product.productName }">
				  						<img style="width:50px;height:50px;margin-top:0px;" src="${product.mImgUrl}" alt="${product.productName }">
				  					</a>
				  				</div>
				  				<div id="show_pro_i_down"></div>
							</div>
						<script type="text/javascript">
							$(document).ready(function() {
								$("#product_img a").fancybox();
							});
						</script>
						<script type="text/javascript">
									$(document).ready(function() {
										$("#show_i_pro a").fancybox();
									});
									function products_i_up(){
										for(i=1;i<=5;i++){
											$('#pro_i_img'+i).show();
										}
										for(i=6;i<=10;i++){
											$('#pro_i_img'+i).hide();
										}
										return false;
									}
									function products_i_down(){
										for(i=1;i<=5;i++){
											$('#pro_i_img'+i).hide();
										}
										for(i=6;i<=10;i++){
											$('#pro_i_img'+i).show();
										}
										return false;
									}
									function zoom_big(pic,size){
										document.getElementById('big_pic').src = pic;
										str = size.split(";");
										str[0] = str[0].replace("width:", "");
										str[1] = str[1].replace("height:", "");
										str[2] = str[2].replace("margin-top:", "");
										$('#big_pic').css({width:str[0],height:str[1]});
										$('#big_pic').css("margin-top",str[2]);
									}
                                    
                                    <!--$('.text').next('ul').hide(); products_class_change('29');-->
                                    
							</script>
						<div>
							
						</div>
					</div>
					<!-- 产品图信息 -->
					<div class="rightProductInfo">
						<div class="product_txt">${product.productName }</div>
						<div class="txt">
							
							<p>品名:${product.productName }</p>
							<p>产品规格： ${product.productProperty }</p>
							<p>市场定价：<span> ${product.price } </span>(RMB)</p>
							<p>
							
							</p></div>
					</div>
					<div style="clear:both;"></div>
				</div>
					<div class="productInfo_body">
						<div class="product_txt">产品详细说明</div>
						<div class="productIntro">
							产品介绍：${product.introduction }
						</div>
						<div class="txt">
						<c:forEach var="item" items="${product.sysFile }" varStatus="status">
							<p><img alt="" src="${item.fileFullPath}" style="width: 650px; "></p>
						</c:forEach>
			           </div>
					</div>
			</div>
			<div style="clear:both;"></div>
		</div>
		<div id="bg"> 
			<!-- 尾部jsp -->
			<jsp:include page="footer.jsp"></jsp:include>
			
	    </div>
    </body>
</html>